<template>
  <view>
    <view class="calendar">
      <view class="detail">
        <view class="datedetail"
          >{{ datedetail | intercept }}
          <view class="festival" v-if="festival">（{{ festival }}）</view></view
        >
      </view>
      <view class="calendarhead">
        <view class="tr">
          <text>日</text>
          <text>一</text>
          <text>二</text>
          <text>三</text>
          <text>四</text>
          <text>五</text>
          <text>六</text>
        </view>
      </view>
      <swiper
        class="swiper"
        :current="current"
        @change="change"
        circular="true"
        :style="'height:' + sheight + 'px'"
      >
        <swiper-item
          v-for="(sitem, sindex) in swiper"
          :key="sindex"
          @click="choice"
        >
          <view class="week" v-for="(index, i) in normalDateList" :key="i">
            <view class="tr">
              <block v-for="(noritem, idx) in normalDateList[i]" :key="idx">
                <text
                  :class="{
                    aorange: idx == 0 || idx == 6,
                    agreen: noritem.isToday,
                  }"
                  @tap="choose(noritem.text, i)"
                  >{{ noritem.text }}</text
                >
              </block>
            </view>
            <view class="tr tr2">
              <block v-for="(lunitem, idx) in lunarDateList[i]" :key="idx">
                <text
                  :class="{
                    aorange: idx == 0 || idx == 6,
                    agreen: lunitem.isToday,
                  }"
                  @tap="choose(lunitem.days, i)"
                  >{{ lunitem.text }}</text
                >
              </block>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="lunars">农{{ datedetail | intercepts }}</view>
    <view class="pray_yi">
      <text>宜</text>
      <view style="display: flex; flex: 1; flex-wrap: wrap">
        <text class="pray_tit">{{ itemList.yi }}</text>
      </view>
    </view>
    <view class="pray_yi">
      <text style="background: #cd2930">忌</text>
      <view style="display: flex; flex: 1; flex-wrap: wrap">
        <text class="pray_tit">{{ itemList.ji }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import Calendar from "./calendar.js";
export default {
  data() {
    return {
      sheight: 280,
      Calendar: {},
      normalDateList: [],
      lunarDateList: [],
      flag: true,
      init: false,
      datedetail: "",
      festival: "",
      swiper: [1, 2, 2],
      current: 1,
      show: true,
      allDateLong: [0, 1, 2, 3, 4, 5],
      showItemIndex: 0,
      itemList: [], // 宜
      prayList: [], // 忌
      token: "",
    };
  },
  created() {
    Calendar.initial();
    this.changeDateStatus();
    this.token = uni.getStorageSync("token");
  },

  onLoad() {},

  watch: {
    init(val) {
      this.normalDateList = Calendar.normalDateList;
      this.lunarDateList = Calendar.lunarDateList;
      this.datedetail = Calendar.datedetail;
      this.festival = Calendar.festival;
      this.showItemIndex = Calendar.showItemIndex;
      this.doToggle();
      this.getSwiperHeight();
      this.choose();
    },
  },
  methods: {
    getSwiperHeight() {
      this.sheight = 48 * this.normalDateList.length;
      console.log(this.sheight);
    },
    choice() {},
    toggle() {
      if (this.show) {
        this.show = false;
        this.normalDateList = [this.normalDateList[this.showItemIndex]];
        this.lunarDateList = [this.lunarDateList[this.showItemIndex]];
        this.sheight = 60;
      } else {
        this.show = true;
        this.getSwiperHeight();
        this.changeDateStatus();
      }
    },
    doToggle() {
      if (!this.show) {
        this.normalDateList = [this.normalDateList[this.showItemIndex]];
        this.lunarDateList = [this.lunarDateList[this.showItemIndex]];
        this.sheight = 60;
      }
    },
    change(e) {
      let Bt = this.current;
      let Nt = e.detail.current;
      if (Bt == 0) {
        if (Nt == 2) {
          this.resMonth();
          this.current = Nt;
          return;
        }
      }
      if (Bt == 2) {
        if (Nt == 0) {
          this.addMonth();
          this.current = Nt;
          return;
        }
      }
      if (Nt > Bt) {
        this.addMonth();
      } else {
        this.resMonth();
      }
      this.current = Nt;
    },
    addMonth() {
      if (!this.show) {
        this.changeDate("WD");
      } else {
        this.changeDate("MD");
      }
    },
    resMonth() {
      if (!this.show) {
        this.changeDate("WU");
      } else {
        this.changeDate("MU");
      }
    },
    async choose(item, index) {
      if (item !== undefined && item !== " ") {
        this.changeDateStatus();
        Calendar.setToday(item);
        this.showItemNum = index;
      }
      var newstring = this.datedetail.substring(0, 15);

      // newstring = newstring.substring(0, newstring.indexOf(' '));
      newstring = newstring.replace(/([年月])/g, "-");
      newstring = newstring.replace(/日/g, "");

      newstring = newstring.replace(/\s*/g, "");
      console.log(newstring);
      const res = await this.$myRequest({
        url: "index/getLaoHangLi",
        method: "POST",
        header: {
          token: this.token,
        },
        data: {
          date: newstring,
        },
      });
      this.itemList = res.data.data;
    },
    changeDateStatus() {
      if (this.init) {
        this.init = false;
      } else {
        this.init = true;
      }
    },

    changeDate(type) {
      this.changeDateStatus();

      Calendar.pushBtm(type);
    },
  },
  filters: {
    intercept(value) {
      return value.split("星")[0];
    },
    intercepts(value) {
      return value.split("农")[1];
    },
  },
};
</script>

<style lang="scss">
page {
  color: #333;
}

.pray_yi {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 90rpx;
  color: #008200;
  box-sizing: border-box;
  margin-bottom: 30rpx;
  > text {
    width: 90rpx;
    height: 90rpx;
    background: #019007;
    border-radius: 50%;
    text-align: center;
    line-height: 90rpx;
    font-size: 36rpx;
    font-weight: 500;
    color: #ffffff;
  }
  .pray_tit {
    font-size: 30rpx;
    font-weight: 400;
    color: #999999;
    margin-left: 30rpx;
  }
}

.aorange {
  font-size: 16px;
}

.agreen {
  font-size: 16px;
  color: #007aff !important;
  font-weight: bold;
}

.one {
  font-size: 16px;
  color: #000;
  font-weight: normal;
}

.festival {
  color: #333333;
  flex: 1;
  text-align: left;
  font-weight: normal;
}

.datedetail {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  border: 0;
  padding: 5px 10rpx;
  line-height: 40rpx;
  margin: 0;
  text-align: center;
  font-size: 34rpx;
  font-weight: 550;
  color: #333333;
}

.datedetail span {
  color: #23460f;
}

.detail {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  //border: 1px solid #a6a8ab;
}

.date {
  clear: both;
  padding-top: 0 !important;
  padding-top: 12px;
  width: 490px;
  height: 40px !important;
  height: 28px;
  font-size: 16px;
  // border: 1px solid #a6a8ab;
  // background-color: #e6f0fa;
}

.calendar {
  text-align: center;
  width: 100%;
  border-top: 0;
  height: auto;
}

.calendarhead {
  color: #fafbfb;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  flex-direction: column;
}

.calendarhead .tr {
  width: 100%;
  display: flex;
  flex-direction: row;
  color: #333;
  padding: 20rpx 0;
}

.calendarhead text {
  flex: 1;
  font-size: 20px;
  padding: 1px;
  text-align: center;
}

.week {
  width: 100%;
  display: flex;
  background-color: #fcfcfc;
  border: 0;
  padding: 0;
  margin: 0;
  flex-direction: column;
}

.week .tr {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.week text {
  flex: 1;
  padding: 1px;
  margin: 0;
  height: 20px;
  overflow: hidden;
}

.tr2 text {
  border-bottom: 1px solid #efefef;
  padding: 5rpx 0;
  font-size: 24upx;
}
.lunars {
  font-size: 30rpx;
  font-weight: 500;
  color: #333333;
  margin: 44rpx auto 50rpx;
}
</style>
